<template>
	<view class="page-my page">
		<view class="top pr">
			<!-- <image src="../../static/imgs/bg-my.png" mode="" class="bg"></image> -->
			<view class="user-box pos-c">
				<image src="https://z3.ax1x.com/2021/08/08/f1Zw4I.jpg" mode="" class="user"></image>
				<view class="fz28 c-fff">小姐姐</view>
			</view>
		</view>
		<view class="p-30">
			<view class="fz24 c-28 tac p-t-10 p-b-10 mb-30" style="background-color: #FCF2E2;">您有<text class="c-fe">1</text>个待支付商品，将在<text class="c-fe">29</text>分钟后失效</view>
			<view class=" p-30 order-container bg-f mb-40">
				<view class="fsb df-ac mb-40">
					<view class="fz30 fw-b c-000">我的订单</view>
					<view class="fz24 c-28 df-ac" @click="goRouter('/pagePoint/order/order',{type:1})">
						查看全部订单 
						<image src="../../static/imgs/arr-r.png" mode="" style="width: 20rpx;height: 20rpx;" class="ml-10"></image></view>
				</view>
				<view class="df">
					<view class="order-tab df-cc column" v-for="item in list" :key="item.id" @click="goRouter('/pagePoint/order/order',{type:item.id})">
						<image :src="item.icon" mode="" class="icon-tab"></image>
						<view class="fz24 c-28">{{item.name}}</view>
					</view>
				</view>
			</view>
			
			<view class="p-30 order-container bg-f">
				<view class="fz30 fw-b c-000 mb-40">我的服务</view>
				<view class="df wrap">
					<view class="order-tab df-cc column mb-40" style="flex:0 0 25%;" v-for="item in serveList" :key="item.id" @click="handleClick(item)">
						<image :src="item.icon" mode="" class="icon-serve"></image>
						<view class="fz24 c-28">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<pageFooter></pageFooter>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{id:2,name:'待支付',icon:require('../../static/imgs/pay1.png')},
					{id:3,name:'待发货',icon:require('../../static/imgs/pay2.png')},
					{id:4,name:'待收货',icon:require('../../static/imgs/pay3.png')},
					{id:5,name:'退款/售后',icon:require('../../static/imgs/pay4.png')},
				],
				serveList:[
					{id:1,name:'我的地址',icon:require('../../static/imgs/m1.png'),url:'/pages/address/address'},
					{id:2,name:'在线客服',icon:require('../../static/imgs/m2.png')},
					{id:3,name:'联系我们',icon:require('../../static/imgs/m3.png')},
					{id:4,name:'常见问题',icon:require('../../static/imgs/m4.png')},
					{id:5,name:'一键反馈',icon:require('../../static/imgs/m5.png'),url:'/pages/replay/replay'},
					{id:6,name:'分享好友',icon:require('../../static/imgs/m6.png')},
				]
			}
		},
		methods: {
			handleClick(data) {
				this.goRouter(data.url)
			}
		}
	}
</script>

<style lang="scss">
.page-my {
	background-color: #F8F8F8;
	padding-top: 0;
	.top {
		background: linear-gradient(0deg,#d956a9, rgb(173, 51, 127));
			height: 320rpx;
		.bg {
			width: 100%;
			height: 320rpx;
		}
		.user-box {
			text-align: center;
			.user {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				
			}
		}
	}
	.order-container {
		border-radius: 27rpx;
		.order-tab {
			flex:1;
			.icon-tab {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 20rpx;
			}
			.icon-serve {
				width: 70rpx;
				height: 70rpx;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
